<template>
  <div class="padding">
    <el-card class="margin-top">
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">客户价格表</span>
      </div>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        v-if="productPriceShows.length > 0"
      >
        <el-tab-pane
          :key="index"
          v-for="(item, index) in productPriceShows"
          :label="item.packProductName"
          :name="item.packProductName"
        >
          <TableComponent
            :tableData="item.queryProductPrice.tableData"
            :tableColumns="item.queryProductPrice.tableColumns"
          />
        </el-tab-pane>
      </el-tabs>

      <div v-else class="text-center">
        暂无数据
      </div>
    </el-card>
  </div>
</template>

<script>
import TableComponent from "./TableComponent";
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      activeName: "",
      productPriceShows: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let initData = localStorage.getItem("intParcelCustomerGroupData");
      if (initData && initData !== "null") {
        initData = JSON.parse(initData);
      } else {
        initData = await ajax("intParcelCustomerGroupData", {});
        if (initData.code === 200) {
          localStorage.removeItem("intParcelCustomerGroupData");
          localStorage.setItem(
            "intParcelCustomerGroupData",
            JSON.stringify(initData.data)
          );
        } else {
          this.$message.error(initData.message);
        }
      }
      const data = await ajax("queryCustomerPriceByIdAndUserId", {
        // id: 4
        id: this.$store.state.edit.row.id
      });

      if (
        data.data[0].productPriceShows &&
        data.data[0].productPriceShows.length > 0
      ) {
        let productPriceShows = data.data[0].productPriceShows;
        this.activeName = data.data[0].productPriceShows[0].packProductName;
        for (const i of productPriceShows) {
          this.formatData(i);
        }

        console.log("productPriceShows", productPriceShows);
        this.productPriceShows = productPriceShows;
      }
    },
    formatData(data) {
      let tableColumns = [];
      let tableData = [];
      let cdate = "";
      let col = [];
      for (const j of data.zoneProductPrices) {
        let data = {};
        let columns = {};
        for (const k in j) {
          data.zonePlanId = j[0].zonePlanId;

          data[
            `${j[k].type}_${j[k].category}_${j[k].startWeight}_${j[k].endWeight}`
          ] = j[k].priceValue;
        }
        col.push(data);
      }
      console.log("col", col);
      tableData = [...col];
      // }

      let arr = [];

      for (const j in tableData[0]) {
        console.log(j);
        if (j !== "zonePlanId") {
          arr.push({
            prop: j
          });
        }
      }
      console.log("arr", arr);
      data.queryProductPrice = {
        tableData: tableData,
        tableColumns: arr
      };
      return data;
    },
    handleClick() {}
  }
};
</script>

<style></style>
